<template>
  <div class="login-container" style="margin-top: 50px">
    <el-form :model="loginForm" :rules="loginRules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
      <el-form-item label="工号" prop="userName">
        <el-input v-model="loginForm.userName" placeholder="请输入登录工号" clearable></el-input>
      </el-form-item>
      <el-form-item label="密码" prop="password">
        <el-input type="password" v-model="loginForm.password" clearable autocomplete="off" show-password placeholder="请输入密码"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm('ruleForm')">点击登录</el-button>
        <el-button type="primary" @click="loginTest">测试登录</el-button>
        <!-- <el-button type="primary" @click="testApi">测试请求</el-button> -->
        <el-button @click="resetForm('ruleForm')">重置</el-button>
      </el-form-item>
    </el-form>
    <el-dialog title="提示" :visible.sync="dialogVisible">
        <audio :src="audioSrc" controls ref="audioPlayer" @ended="onAudioEnd" @pause="onAudioPause" @play="onAudioPlay">
          您的浏览器不支持 audio 标签。
        </audio>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
        </span>
    </el-dialog>
  </div>
</template>
<script>
export default{
  data(){
    return {
      loginForm:{
        userName:'',
        password:''
      },
      loginRules:{
        userName:[
          {required:true,message:'请输入工号',trigger:'blur'}
        ],
        password:[
          {required:true,message:'请输入密码',trigger:'blur'}
        ]
      },
      audioSrc: '',
      dialogVisible: false
    }
  },
  created(){
    // this.loginTest()
  },
  methods:{
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.$http.post('/auth/login', this.loginForm).then((res) => {
            if(res.success && res.code === 200){
              this.$message.success('登录成功')
              sessionStorage.setItem('user_id', res.data)
              this.$router.push('/index')
            }
          })
        } else {
          this.$message.warning('请填写用户名、密码')
          return false
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    async loginTest(){
      // this.$http.post('/auth/login1', this.loginForm).then((res) => {
      //   console.log("测试登录==>", res)
      //   if(res.success && res.code === 200){
      //     this.$message.success('登录成功')
      //     sessionStorage.setItem('access_token', res.data.access_token)
      //     sessionStorage.setItem('refresh_token', res.data.refresh_token)
      //     document.cookie = `refresh_token=${res.data.refresh_token}; Path=/; HttpOnly; Secure; SameSite=Strict`
      //     this.$router.push('/index')
      //   }
      // })
      
      const BASE_URL = process.env.NODE_ENV !== 'production' ? process.env.VUE_APP_BASE_API : process.env.VUE_APP_SERVER_URL
      console.log('base url: ', BASE_URL)

      const url = new URL('http://www.w3schools.com/html/horse.mp3')
      const path = url.pathname
      const { hostname, port } = window.location
      const port1 = port || (window.location.protocol === 'https:' ? 443 : 80)
      const p = `https://${hostname}:${port1}/mp3${path}`
      this.audioSrc = p
      console.log(this.audioSrc)
      console.log('hostname: ', hostname)
      console.log('port: ', port)
      this.dialogVisible = true
    },
    testApi(){
      this.$http.post('/type/queryBookTypes', {}).then(res => {
        console.log("测试==>", res)
      })
    },
    onAudioPlay() {
      console.log('音频开始播放');
      this.$refs.audioPlayer.play();
    },
    onAudioPause() {
      console.log('音频暂停');
      this.$refs.audioPlayer.pause();
    },
    onAudioEnd() {
      console.log('音频结束');
      this.$emit('ended');
    }
  }
}
</script>

<style scoped>
.login-container{
  margin-top: 100px; 
  width: 400px;
  margin: 0 auto;
  background-color: antiquewhite;
  padding: 5% 10% 5% 8%;
}
</style>